<template>
  <view class="content">
    <view v-if="type == 0">
      <view
        @click="go(item.id)"
        class="list-item"
        v-for="(item, index) in orderlist"
        :key="index"
      >
        <view class="tit"
          >订单编号：{{item.order_sn}}
          <text>{{item.status_text}}</text>
        </view>

        <view class="box" v-for="(items,indexs) in item.item">
          <img :src="items.product_image" />
          <view class="box-right">
            <text class="title ellipsis_3"
              >{{items.product_title}}</text
            >

            <view class="gg"
              >规格：{{items.sku_name}}
              <text>x{{items.product_num}}</text>
            </view>
            <view class="sfje">¥{{items.total_price}}</view>
          </view>
        </view>

        <view class="right">
          <view
            >共{{item.item.length}}份，实付金额
            <text class="sfje">¥{{item.total_price}}</text>
          </view>
        </view>
        <view class="btn">
          <button v-if="item.status == 2 || item.status == 1" @click.stop="shouhou(item.id)" class="ljpj">
            发起售后
          </button>
          <button v-if="item.status == 0" @click.stop="pay(item.id,index)" class="ljpj">立即支付</button>
          <button v-if="item.status == 2" @click.stop="take_order(item.id,index)" class="ljpj">确认收货</button>
		  
		  <button  v-if="item.status != 0" class="ckxq">查看详情</button>
          <!-- <u-button type="primary" color="linear-gradient(to right, #0096FF, #003DB1)"
                              @click="">立即评价
                    </u-button>
                    <u-button> 查看详情</u-button> -->
        </view>
      </view>
    </view>
	<view v-else>
		<view
		  @click="gos(item.id)"
		  class="list-item"
		  v-for="(item, index) in orderlist"
		  :key="index"
		>
		  <view class="tit"
		    >订单编号：{{item.order_sn}}
		    <text>{{item.status_text}}</text>
		  </view>
		
		  <view class="box">
		    <img :src="item.category_image" />
		    <view class="box-right">
		      <text class="title ellipsis_3"
		        >{{item.category_name}}</text
		      >
		      <!-- <view class="sfje">¥{{item.price}}</view> -->
		    </view>
		  </view>
		
		  <view class="right">
		    <view>
		      <text class="sfje">¥{{item.price}}</text>
		    </view>
		  </view>
		  <view class="btn">
		    <button v-if="item.status == 0" @click.stop="pays(item.id,index)" class="ljpj">立即支付</button>
		    <button v-if="item.status == 1" @click.stop="take_order(item.id,index)" class="ljpj">确认发货</button>			  
			<button  v-if="item.status != 0" class="ckxq">查看详情</button>
		  </view>
		</view>
	</view>
  </view>
</template>
<script>
import RecommendList from "@/pages/components/RecommendList.vue";
import MarketInfoList from "@/pages/components/MarketInfoList.vue";

export default {
  name: "index",
  components: {
    MarketInfoList,
    RecommendList,
  },
  props: {
	  orderlist:{
		  type:Array
	  },
	  type:{
		  type:Number,
		  default:0
	  }
  },
  data() {
    return {
      current: 0,
    };
  },
  methods: {
	shouhou(e){
		uni.navigateTo({ url: "/pages/returns/index?order_id="+e });
	},
	
	take_order(e,index){
		this.$emit('take_order',[e,index])
	},
	pay(e,index){
		this.$emit('pay',[e,index])
	},
	pays(e,index){
		this.$emit('pays',[e,index])
	},
	
	gos(e) {
	  uni.navigateTo({ url: "/pages/person/jdorderDetails?order_id="+e });
	},
    go(e) {
      uni.navigateTo({ url: "/pages/person/orderDetails?order_id="+e });
    },
  },
  created() {},
  mounted() {},
};
</script>
<style lang="scss" scoped>
.sfje {
  font-weight: 700 !important;
}
.content {
  padding: 20rpx 0;

  .list-item {
    margin: 20rpx 0;
    background-color: #fff;
    padding: 20rpx;

    .tit {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 0;
      color: #999999;
      border-bottom: 1rpx solid #f4f4f4;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 30rpx;
      text-align: left;
      text {
        color: #131313;
      }
    }

    .box {
      padding: 20rpx 0;
      display: flex;
      gap: 20rpx;

      img {
        flex-shrink: 0;
        width: 66px;
        height: 66px;
        border-radius: 4px;
      }

      .box-right {
        //display: flex;
        //flex-direction: column;
        flex: 1;

        .gg {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #999999;
          margin: 20rpx 0;
          font-size: 22rpx;
          font-weight: 400;
        }

        .title {
          flex: 1;
          white-space: pre-wrap; /* 允许在单词内换行 */
          word-break: break-all; /* 允许在任意字符处换行 */
          font-weight: 700;
          font-size: 26rpx;
        }
      }
    }

    .right {
      text-align: right;
      margin: 20rpx 0;
      color: #999999;
      font-size: 22rpx;

      text {
        color: #131313;
        font-weight: 500;
        font-size: 30rpx;
        padding-left: 10rpx;
      }
    }

    .btn {
      display: flex;
      flex-direction: row-reverse;
      gap: 20rpx;

      button {
        width: 156rpx;
        height: 54rpx;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        font-size: 24rpx;
        margin: 0;
      }
      .ckxq {
        color: #999;
        border: 1px solid #999999;
      }
      .ljpj {
        color: #fff;
        background: linear-gradient(270deg, #003db1 0%, #0096ff 100%);
      }
    }
  }
}
</style>

